<template>
  <div class="aside">
    <div>
      <img
        class="logo"
        src="https://s.cn.bing.net/th?id=OIP-C.Wiucf9GVniRfm8a_mqGePQAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
        alt=""
      />
      <h3 :class="{ act: isCollapse }">医疗服务后台</h3>
    </div>
    <el-menu
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#fffd04b"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :router="true"
      :collapse="isCollapse"
    >
      <SidebarItem v-for="route in permissions " :key="route.path" :item="route" :base-path="route.path" />
    </el-menu>
  </div>
</template>

<script>
import routes from '@/router/routes'
import SidebarItem from './sidebar-item.vue'
import { getmenu } from '@/api/aside'
export default {
  data() {
    return {
      menu: '',
      newmenu: [],
      permissions: [],
    }
  },
  computed: {
    isCollapse() {
      return this.$store.state.aside.isCollapse
    },
    routes() {
      return routes.filter((item) => {
        return item.meta
      })
    },
  },
  methods: {
    test() {
      console.log(this.routes)
    },
    handleOpen(key, keyPath) {
      console.log(this.routes)
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(this.routes)
      console.log(key, keyPath)
    },
  },
  components: { SidebarItem },
  created() {
    getmenu().then((data) => {
      this.permissions = data.roles[0].permissions
    })
  },
}
</script>

<style lang="scss" scoped>
.aside {
  height: 100vh;
  // overflow: Scroll;
  overflow-x: hidden;
  overflow-y: hidden;

  width: auto !important;
}
.act {
  display: none;
}
div {
  z-index: 100;
  line-height: 80px;
}
.logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline;
  line-height: 20px;
  margin-left: 20px;
  vertical-align: middle;
}
h3 {
  color: #fff;
  font-family: "楷体";
  display: inline;
  vertical-align: middle;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu-item.is-active {
  background: #b3d6f2 !important;
}
.el-menu {
border-right:0 !important;
}
::v-deep.el-aside{
    width: auto !important;
  }
</style>
